<template>
  <div>
    <header>
      <img :src="logo" alt="">
      <h1>BMIApp</h1>
    </header>
    <main>
      <BMIFormComponent
        class="my-form"
        :is-show-status="isShowStatus"
        :current-data="currentData"
        @emit-bmi="getEmitBmi"
      />
      <BMIStatusComponent
        class="my-status"
        :status="currentData.status"
      />
    </main>
  </div>
</template>

<script>
import BMIFormComponent from "@/components/bmi/BMIFormComponent";
import BMIStatusComponent from "@/components/bmi/BMIStatusComponent";
import http from 'axios'
import logo from './assets/logo.png'

export default {
  name: "BMIApp",
  components: {
    BMIFormComponent,
    BMIStatusComponent
  },
  data() {
    return {
      currentData: {},
      isShowStatus: false,
      logo
    }
  },
  methods: {
    getEmitBmi(data) {
      http({
        url: 'https://veihwwnelcwq.leanapp.cn/bmi',
        method: 'POST',
        data: data
      }).then(res => {
        this.isShowStatus = true
        this.currentData = res.data.data
      })
    }
  }
}
</script>

<style lang="less">
/*@import "./assets/css/reset.css";*/
@green-bg: #42b983;
@green-light: rgba(@green-bg, .3);
@green-border: 2px solid @green-bg;

header {
  width: 1000px;
  margin: 0 auto;
  background-color: @green-light;
  border: @green-border;
  padding: 5px;
  display: flex;
  align-items: center;
  height: 80px;

  img {
    height: 100%;
  }
}

main {
  display: flex;
  width: 1000px;
  margin: 0 auto;
  justify-content: space-between;

  .my-status {
    width: 500px !important;
    height: 300px;
    background-color: @green-bg;
    border: @green-border;
  }

  .my-form {
    border: @green-border;
  }
}
</style>